@import 'variables';

:host {
  display: block;
  widht: inherit;

  //&:not(:last-child){
  border-bottom: 1px solid #efefef;
  //}

  .track-list-item {
    display: flex;
    margin: 0 -15px;
    padding: 20px 15px;

    &:hover {
      background: $gray-lighter;

      .cover /deep/ app-track-play-button .play-button {
        opacity: 1;
      }

      .details {
        .drag-indicator {
          opacity: 1 !important;
          margin-right: 5px !important;
        }
      }
    }

    &.selected {
      background: white;
      box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.1);
      border-radius: 2px;
    }

    &:not(:last-child) {
      border-bottom: 1px solid $gray-lighter;
    }

    .cover {
      position: relative;

      app-track-cover {
        width: 80px;
        height: 80px;
        flex-shrink: 0;
      }

      app-track-play-button {
        width: 100%;
        height: 100%;
      }

      /deep/ app-track-play-button .play-button {
        position: absolute;
        top: 0;
        left: 0;
        width: inherit;
        height: inherit;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.5);
        opacity: 0;
        transition: opacity 0.5s ease;

        &.isPlaying {
          opacity: 1;

          .btn {
            background: rgba(255, 255, 255, 0.6);
            color: $brand-primary;
            border-color: $brand-primary;
          }
        }

        .btn {
          background: rgba(0, 0, 0, 0.2);
          &:hover {
            background: rgba(255, 255, 255, 0.6);
            color: $brand-primary;
            border-color: $brand-primary;
          }
        }
      }
    }

    .details {
      order: 2;
      flex: auto;
      margin-left: 15px;
      overflow: hidden;

      .track-info {
        display: flex;
        align-items: center;
        margin-bottom: 18px;

        .drag-indicator {
          cursor: grab;
          color: $gray-light;
          margin-right: -15px;
          opacity: 0;
          transition: all 0.5s ease;
        }

        app-toggle-liked-track {
          padding-right: 10px;
        }

        .meta {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          flex-grow: 1;

          .created {
            color: #aaa;
            &:before {
              content: '—';
              margin-left: -2px;
              margin-right: 2px;
            }
          }
        }

        .btn-holder {
          display: flex;
          align-self: flex-start;

          .btn {
            margin: 0;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;

            &:not(:last-child) {
              margin-right: 5px;
            }
          }

          .is-queued {
            border: none;
            color: $brand-primary;

            .fa-trash {
              display: none;
            }

            &:hover {
              .fa-queue {
                display: none;
              }

              .fa-trash {
                display: inline;
              }
            }
          }

          app-options-btn {
            margin: 0 0 0 3px;
          }
        }
      }

      .stats {
        .label:first-child {
          padding-left: 0;
        }

        .label-light {
          border: none;
        }

        a.label{
          background: none !important;

          &:hover{
            color: $brand-primary;
          }
        }
      }

      app-loading-spinner {
        width: 12px;
        height: 12px;
        display: inline-block;
        top: -3px;
        position: relative;
      }
    }
  }

  @media (max-width: $screen-sm-min) {
    .track-list-item {
      position: relative;
      padding: 20px 15px 10px 15px;

      .cover {
        app-track-cover {
          width: 40px;
          height: 40px;

          &.hasNoTrack {
            padding: 2px;
          }
        }

        /deep/ app-track-cover {
          .hasNoTrack {
            padding: 2px;
          }
        }

        app-track-play-button {
          width: 40px;
          height: 40px;
        }

        /deep/ app-track-play-button {
          .btn-round {
            width: 30px;
            height: 30px;
            font-size: 12px;
            padding: 0 0 0 1px;
          }
        }
      }
      .details {
        margin-left: -40px;
        padding-left: 55px;
        overflow: hidden;
        position: relative;
        height: 67px;

        .stats {
          position: absolute;
          left: 0;
          white-space: nowrap;
          bottom: 0;

          .label-light {
            &:first-child {
              padding-left: 0;
            }
          }
        }
      }

      .queue-btn,
      /deep/ app-options-btn .btn{
        &:after{
          content: "";
          position: absolute;
          right: -3px;
          height: 100px;
          width: 80px;
        }
      }

      /deep/ app-options-btn .btn{
        &:after{
          top: 0;
          width: 28px;
        }
      }
    }
  }
}
